<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>商品管理</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/page.css">
    <script src="../js/jquery-3.2.1.min.js"></script>
    <script src="../js/media.js"></script>
    <script src="../js/common.js"></script>



    <style>
    	/*---------------------------弹出框样式----------------*/
.promptBomb{
	/*display: none;*/
	width:100%;
	height:100%;
	position: fixed;
	top:0;
	left: 0;
	background:rgba(0,0,0,0.2)
}
.promptBomb .promptBomb-box{
	width:2.8rem;
	height:1.6rem;
	background:#fff;
	padding-left: 0.24rem ;
	padding-right:0.16rem;
	margin:2.2rem auto;
}
.promptBomb .promptBomb-box .promptBomb-title{
	font-size:0.16rem;
	line-height:0.16rem;
	padding-top:0.24rem;
	color:#333;
}
.promptBomb .promptBomb-box .promptBomb-content{
	font-size:0.14rem;
	color:#666;
	width:2.4rem;
	height:0.44rem;
	overflow: hidden;
	line-height:0.21rem;
	margin-top:0.20rem;
}
.promptBomb .promptBomb-box .promptBomb-btn{
	width:0.88rem;
	height:0.36rem;
	background: none;
	color: #513104;
	font-size: 0.14rem;
	text-align: center;
	line-height: 0.36rem;
	float: left;
	border: 0px;
}
.promptBomb .promptBomb-box .promptBomb-btn1{
	width:0.88rem;
	height:0.36rem;
	background: none;
	color: #513104;
	font-size: 0.14rem;
	text-align: center;
	line-height: 0.36rem;
	float: right;
	border: 0px;
}
        .bd-0 {
            display: none;
        }
        
        .active {
            display: block;
        }
        .btn-delete{
        	float:right;display: block;border:0.01rem solid #999;width:0.48rem;height:0.23rem;line-height:0.24rem;text-align:center;border-radius:0.04rem;margin-left:0.12rem;
        }
        .btn-editor{
        	float:right;display: block;border:0.01rem solid #5e3004;width:0.48rem;height:0.23rem;line-height:0.24rem;text-align:center;border-radius:0.04rem;color:#5e3004;
        }
    </style>
</head>

<body>
    <!--头部-->
    <div class="public-header flex">
        <!--<span class="public-header-left-search"></span>-->
        <span class="public-header-left-back"></span>
        <span class="public-header-center">商品管理</span>
        <span class="public-header-right" onclick='javascript:window.location.href="../page/Publish_goods.html?v=1.0"'>新建商品</span>
    </div>

    <!--正文-->
    <div class="Lot-management bc-gray">
        <div class="hd flex">
            <!--<a href="javascript:;" :class="{active:active[0]}" @click='click_pop(2,0)'>审核中</a>-->
            <a href="javascript:;" :class="{active:active[1]}" @click='click_pop(3,1)'>售卖中</a>
            <a href="javascript:;" :class="{active:active[2]}" @click='click_pop(4,2)'>已截拍</a>
            <a href="javascript:;" :class="{active:active[3]}" @click='click_pop(5,3)'>已流拍</a>
            <a href="javascript:;" :class="{active:active[4]}" @click='click_pop(6,4)'>已失败</a>
            <a href="javascript:;" :class="{active:active[5]}" @click='click_pop(7,5)'>草稿箱</a>
            <a href="javascript:;" :class="{active:active[6]}" @click='click_pop(0,6)'>未开始</a>
        </div>
        <div class="bd">
            <div v-if="datas.length == 0">
                <div style="text-align: center;margin-top: 100px;">暂无相关商品</div>
            </div>
            <div v-else>
                <div class="bd-1 bd-0 active">
                    <ul class="clearfix">
                        <div v-if="isWhat == 1"><!--售卖中-->
                            <li class="clearfix" v-for='item in datas' @click="nextPp(item.produce_id)">
                                <img :src="item.produce_head_image.split(',')[0]" alt="">
                                <div  style="width: 2.6rem;overflow: hidden;line-height: 0.243rem;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;height: initial;">
                                    {{item.produce_describe}}
                                </div>
                                <p class="btn-bto" style="float:right;width: 2.6rem;height:0.24rem;position: absolute;right: 0.12rem;bottom: 0.09rem;">
									<span class="btn-delete" @click="deleteP(item.produce_id)">下架</span>
									<!--<span class="btn-editor" @click="nextUrls(item.production_id)">编辑</span>-->
								</p>
                                <!--<em class="time">09-09</em>-->
                                <!--<img src="../img/二维码@2x 2.png" alt="" class="em">-->
                            </li>
                        </div>
                        <div v-if="isWhat == 5">
                            <li class="clearfix" v-for='item in datas' @click="nextUrls(item.auction_id,item.produce_id)">
                                <img :src="item.produce_head_image.split(',')[0]" alt="">
                                <div style="width: 2.6rem;overflow: hidden;line-height: 0.243rem;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;">
                                    {{item.produce_describe}}
                                </div>
                                <!--<em class="time">09-09</em>-->
                                <!--<img src="../img/二维码@2x 2.png" alt="" class="em">-->
                            </li>
                        </div>
                        <div v-if="isWhat == 2 || isWhat == 3 || isWhat == 4 || isWhat == 6">
                            <li class="clearfix" v-for='item in datas'>
                                <img :src="item.produce_head_image.split(',')[0]" alt="">
                                <div style="width: 2.6rem;overflow: hidden;line-height: 0.243rem;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;">
                                    {{item.produce_describe}}
                                </div>
                                <!--<em class="time">09-09</em>-->
                                <!--<img src="../img/二维码@2x 2.png" alt="" class="em">-->
                            </li>
                        </div>
                        <div v-if="isWhat == 0 ">
                            <li class="clearfix" v-for='item in datas'>
                                <img :src="item.produce_head_image.split(',')[0]" alt="">
                                <div class="clearfix" style="height:0.243rem;width: 2.6rem;overflow: hidden;line-height: 0.243rem;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;">
                                  {{item.produce_describe}}
                                </div>
                                <p class="btn-bto" style="float:right;width: 2.6rem;height:0.24rem;margin-top:0.3rem">
                               		<span class="btn-delete" @click="deleteP1111(item.auction_id)">删除</span>
                               		<span class="btn-editor" @click="nextUrls(item.auction_id,item.produce_id)" >编辑</span>
                                </p>
                                <!--<em class="time">09-09</em>-->
                                <!--<img src="../img/二维码@2x 2.png" alt="" class="em">-->
                            </li>
                        </div>

                    </ul>
                </div>
                <!--           <div class="bd-2 bd-0">
                <ul class="clearfix">
                    <li class="clearfix" v-for='item in datas' @click="nextPp(item.produce_id)">
                        <img :src="item.produce_head_image" alt="">
                        <div>
                            {{item.produce_describe}}
                        </div>
                        &lt;!&ndash;<em class="time">09-09</em>&ndash;&gt;
                        &lt;!&ndash;<img src="../img/二维码@2x 2.png" alt="" class="em">&ndash;&gt;
                    </li>
                </ul>
            </div>
            <div class="bd-3 bd-0">
                <ul class="clearfix">
                    <li class="clearfix" v-for='item in datas'>
                        <img :src="item.produce_head_image" alt="">
                        <div>
                            {{item.produce_describe}}
                        </div>
                        &lt;!&ndash;<em class="time">09-09</em>&ndash;&gt;
                        &lt;!&ndash;<img src="../img/二维码@2x 2.png" alt="" class="em">&ndash;&gt;
                    </li>
                </ul>
            </div>
            <div class="bd-4 bd-0">
                <ul class="clearfix">
                    <li class="clearfix" v-for='item in datas'>
                        <img :src="item.produce_head_image" alt="">
                        <div>
                            {{item.produce_describe}}
                        </div>
                        &lt;!&ndash;<em class="time">09-09</em>&ndash;&gt;
                        &lt;!&ndash;<img src="../img/二维码@2x 2.png" alt="" class="em">&ndash;&gt;
                    </li>
                </ul>
            </div>
            <div class="bd-5 bd-0 ">
                <ul class="clearfix">
                    <li class="clearfix" v-for='item in datas'>
                        <img :src="item.produce_head_image" alt="">
                        <div>
                            {{item.produce_describe}}
                        </div>
                        &lt;!&ndash;<em class="time">09-09</em>&ndash;&gt;
                        &lt;!&ndash;<img src="../img/二维码@2x 2.png" alt="" class="em">&ndash;&gt;
                    </li>
                </ul>
            </div>
            <div class="bd-6 bd-0">
                <ul class="clearfix">
                    <li class="clearfix" v-for='item in datas' @click="nextUrls(item.auction_id,item.produce_id)">
                        <img :src="item.produce_head_image" alt="">
                        <div>
                            {{item.produce_describe}}
                        </div>
                        &lt;!&ndash;<em class="time">09-09</em>&ndash;&gt;
                        &lt;!&ndash;<img src="../img/二维码@2x 2.png" alt="" class="em">&ndash;&gt;
                    </li>
                </ul>
            </div>
                <div class="bd-7 bd-0">
                    <ul class="clearfix">
                        <li class="clearfix" v-for='item in datas'>
                            <img :src="item.produce_head_image" alt="">
                            <div>
                                {{item.produce_describe}}
                            </div>
                            &lt;!&ndash;<em class="time">09-09</em>&ndash;&gt;
                            &lt;!&ndash;<img src="../img/二维码@2x 2.png" alt="" class="em">&ndash;&gt;
                        </li>
                    </ul>
                </div>
            </div>-->
            </div>
        </div>
        <script src="../js/vue.js"></script>
        <script src="../js/vue-resource.min.js"></script>
        <script>
            $(function() {
                new Vue({
                    el: 'body',
                    data: {
                        datas: '',
                        active: [0,1, 0, 0, 0, 0, 0],
                        isshow: false,
                        uid: '',
                        sid: '',
                        isWhat: 1
                    },
                    ready: function() {
                        var _self = this;
                        _self.uid = sessionStorage.getItem("uid");
                        _self.sid = sessionStorage.getItem("s_id");
                        this.$http.get(base_url + 'ZITAOHUI/information', {
                            params: {
                                value: 3,
                                storeId: _self.sid

                            }
                        }).then(function(response) {
                            console.log(response)
                            var all_data = response.data.extend.list;
                            this.$set('datas', all_data);
                            console.log(this.datas);
                            console.log('图片的地址：'+this.datas[0].produce_head_image.split(',')[0]);
                        })

                        /*     setTimeout(function() {
                               $('.hd a').click(function () {
                              var index = $(this).index();
                              $(this).addClass('active').siblings().removeClass('active');
                              $('.bd-0').eq(index).addClass('active').siblings().removeClass('active');
                          })
                                  }, 1000);*/
                    },
                    methods: {
                        click_pop: function(id, index) {
                            var _self = this;
                            console.log("index:"+index);
                            _self.isWhat = index ;
                            console.log("_self.isWhat："+_self.isWhat);
                            if (index == 0) {
                                _self.active = [1, 0, 0, 0, 0, 0, 0]
                            } else if (index == 1) {
                                _self.active = [0, 1, 0, 0, 0, 0, 0]
                            } else if (index == 2) {
                                _self.active = [0, 0, 1, 0, 0, 0, 0]
                            } else if (index == 3) {
                                _self.active = [0, 0, 0, 1, 0, 0, 0]
                            } else if (index == 4) {
                                _self.active = [0, 0, 0, 0, 1, 0, 0]
                            } else if (index == 5) {
                                _self.active = [0, 0, 0, 0, 0, 1, 0]
                            } else if (index == 6) {
                                _self.active = [0, 0, 0, 0, 0, 0, 1]
                            }
                            this.$http.get(base_url + 'ZITAOHUI/information', {
                                params: {
                                    value: id,
                                    storeId: _self.sid

                                }
                            }).then(function(response) {
                                console.log(response)
                                var all_data = response.data.extend.list;
                                _self.isshow = false;
                                this.$set('datas', all_data);

                            })
                        },
                        nextUrls: function(id, pid) {
                            window.location.href = "../page/Publish_goods.html?id=" + id + "&pid=" + pid;
                        },
                        nextPp: function(id) {
                            window.location.href = "../page/buy-info-page.3.html?p_id=" + id+'&s_id='+this.sid+"&time="+new Date().getTime();
                        },
                        deleteP1111:function(ids){//原来审核中的删除
                        	
                        	promptBombAlert('确定删除该商品？',ids,function(id){
                        		$.ajax({ //删除商品
					                type: "post",
					                url: base_url+"ZITAOHUI/delAuctionSet",
					                data:{
					                    auctionId:id
					                },
					                dataType: "json",
					                success: function (data) {
					                    console.log(data)
					                    if(data.code==1){
					                    	 alert("删除成功");
					                    	location.reload()
					                    }
					                },
					                error: function (error) {
					
					                }
					            })
                        	})	
                        },
                        deleteP:function(ids){//售卖中的删除
                        	console.log("商品的id"+ids);
                        	event.stopPropagation();    //  阻止事件冒泡
                        	promptBombAlert('确定下架此商品？',ids,function(id){
                        		$.ajax({ //删除商品
					                type: "get",
					                url: base_url+"ZITAOHUI/produceShutdown",
					                data:{
					                    produce_id:id
					                },
					                dataType: "json",
					                success: function (data) {
					                    if(data.extend.status==0){//下架失败
					                    	alert("下架失败，请检查是否有人出价！");
					                    }else if(data.extend.status==1){//下架成功
					                    	alert("下架成功，已放入草稿箱中，可重新编辑上架！");
					                    	window.location.reload(); 
					                    }
					                },
					                error: function (error) {
					
					                }
					            })
                        	})
//                      	
                        }
                    }
                })
            })
            var promptBombAlert = function(cont,id,fun){
				var str ='<div class="promptBomb"><div class="promptBomb-box"><p class="promptBomb-title">提示</p><p class="promptBomb-content" style="color:red;text-align:center;width: initial;">'+ cont+'</p><button class="promptBomb-btn">确定</button><button class="promptBomb-btn1">取消</button></div></div>'
				$('body').append(str);
				$('.promptBomb-btn1').click(function(){
					$('.promptBomb').remove();
				})
				$('.promptBomb-btn').click(function(){
					$('.promptBomb').remove();
					fun(id);
				})
			}
        </script>
</body>

</html>